<template>
  <div class="learnIndex">
    <div class="top">
      <i @click="answerStatus" class="iconfont iconkaoshi_timu_icon"></i>
    </div>

    <div class="progress">
      <div class="progress1">
        <div :style="{width:(~~no+1)/length*100 +'%'}"></div>
      </div>

      <div class="topic">第{{~~no+1}}/{{length}}题</div>
    </div>
    <div class="content">
      <div class="contentInner">
        <p class="title">{{~~no+1}}.{{subject.question_type | question_type}}</p>

        <div class="box">
          <p class="topic1" v-html="subject.title"></p>
          <!--@click="answer(index,item)"-->
          <p
                  v-for="(item,index) of subject.option"
                  class="select"
                  :class="item.is_true == 1?'greed':subject.answer.includes(item.id)?'red':''"
                  :key="item.id"
          >{{index+1 | az}}.{{item.title}}</p>

          <div class="answer">
            正确答案：
            <template v-for="(item,index) of subject.option">
            <span
                    v-if="item.is_true == 1"
                    :key="item.id"
                    class="select"
                    :class="item.is_true == 1?'greed':subject.answer.includes(item.id)?'red':''"
            >{{index+1 | az}}.{{item.title}}</span>
            </template>

            <p style="margin-top:20px;">答题解析:</p>
            <p v-html="subject.content"></p>
          </div>
        </div>
      </div>

      <div class="btn" @click="next">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "answerAnalysis",
  data() {
    return {
      listData: [],
      data: {},
      subject: {},
      no: 0,
      fraction: false,
      length: 0
    };
  },
  mounted() {
    this.no = this.$route.query.index || 0;
    this.init();
  },
  filters: {
    question_type: function(e) {
      if (e == 1) {
        return "单选题";
      }
      if (e == 2) {
        return "多选题";
      }
      if (e == 3) {
        return "判断题";
      }
      if (e == 4) {
        return "不定项选择题";
      }
    },
    az: function(num) {
      var s = "";
      while (num > 0) {
        var m = num % 26;
        if (m === 0) m = 26;
        s = (m + 9).toString(36) + s;
        num = (num - m) / 26;
      }
      return s.toUpperCase();
    }
  },

  methods: {
    init() {
      if (this.$route.query.id) {
        this.$http
          .post("/applets/TestInfo/info", {
            phone: JSON.parse(Cookies.get('user_71ydj')).phone,
            id: this.$route.query.id
          })
          .then(res => {
            this.$progress.done();
            this.data = res.data;
            this.length = res.data.length;
            this.subject = res.data[this.no];
          });
      } else {
        this.$progress.done();
        this.data = JSON.parse(localStorage.getItem("grade")).answer;
        this.length = this.data.length;
        this.subject = this.data[~~this.no];
      }
    },

    next() {
      if (this.no + 1 == this.length) {
        this.$alert("已是最后一题", "提示").then((res)=>{
            this.$router.replace({
                path: "/learn/onlineExam",
            });
        });
        return;
      }
      this.no = this.no + 1;
      this.subject = this.data[this.no];
    },

    answerStatus() {
      this.$router.push({
        path: "/learn/answerStatus2",
        query: { id: this.$route.query.id }
      });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 370px;
  overflow-y: scroll;
}
.answer {
  font-size: 15px;
  margin-top: 21px;
  margin-bottom: 10px;
}

.red {
  color: red !important;
}

.greed {
  color: #74c282 !important;
}

.learnIndex {
  position: relative;
  background: url("~@as/img/kaoshi_beijing@2x.png");
  background-size: 100% auto;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;

  .top {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  i {
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }

  .progress {
    margin-top: 15px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;

    .progress1 {
      width: 249px;
      height: 5px;
      background: rgba(0, 0, 0, 0.08);
      margin-right: 15px;
      border-radius: 10px;
      div {
        height: 100%;
        background: #fff;
        width: 20px;
        border-radius: 10px;
      }
    }
    .topic {
      font-size: 12px;
      color: #fff;
    }
  }
  .btn {
    margin-top: 34px;
    width: 287px;
    height: 36px;
    background: #f47548;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -143.5px;
  }
  .content {
    position: relative;
    width: 335px;
    height: calc( 100% - 130px );
    /*height: 510px;*/
    background: #fff;
    margin-top: 40px;
    border-radius: 4px;
    padding: 25px 18px 25px 18px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
      -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
    margin-bottom: 34px;
  }
  .contentInner{
    height: calc( 100% - 40px);
    /*background: red;*/
    overflow-y: scroll;
  }
  .title {
    font-size: 15px;
    color: #999;
  }

  .topic1 {
    font-size: 15px;
    margin-top: 25px;
    color: #333333;
    font-weight: bold;
    word-wrap: break-word;
  }
  .select {
    margin-top: 29px;
    font-size: 15px;
    color: #666;
    word-wrap: break-word;
  }
  .select + .select {
    margin-top: 20px;

  }

  .time {
    width: 86px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffb094;
    position: absolute;
    right: 0;
    top: 25px;
    border-radius: 20px 0 0 20px;
    i {
      margin: 0;
      margin-right: 8px;
      margin-left: 10px;
      color: #fff;
      font-size: 15px;
    }

    span {
      color: #fff;
      font-size: 12px;
    }
  }
}
</style>